﻿<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml"   lang="en" xmlns:th="http://www.thymeleaf.org"><!--<![endif]-->
<head>
	<!-- Basic Page Needs -->
	<meta charset="UTF-8">
	<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
	<title>[[${item.title}]]</title>

	<!-- Mobile Specific Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- Boostrap style -->
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">

	<!-- Theme style -->
	<link rel="stylesheet" type="text/css" href="/css/style.css">

	<!-- Reponsive -->
	<link rel="stylesheet" type="text/css" href="/css/responsive.css">

</head>
<body class="header_sticky">
	<div class="boxed">


		<section id="header" class="header">

			<div th:replace="./module/header::header"></div>
			<div th:replace="./module/category::category"></div>
					
		</section><!-- /#header -->

		<section class="flat-breadcrumb">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<ul class="breadcrumbs">
							<li class="trail-item">
								<a href="#" title="">主页</a>
								<span><img src="/images/icons/arrow-right.png" alt=""></span>
							</li>
							<li class="trail-item">
								<a href="#" title="">商城</a>
								<span><img src="/images/icons/arrow-right.png" alt=""></span>
							</li>
							<li class="trail-end">
								<a href="#" title="">商品</a>
							</li>
						</ul><!-- /.breacrumbs -->
					</div><!-- /.col-md-12 -->
				</div><!-- /.row -->
			</div><!-- /.container -->
		</section><!-- /.flat-breadcrumb -->

		<section class="flat-product-detail">
			<div class="container">
				<div class="row">
					<div class="col-md-6">
						<div class="flexslider">
							<ul class="slides">
							    <li data-thumb="/images/product/flexslider/thumb/2.jpg">
							      <img th:src="${item.image}" alt="image slider" />
							      <span>NEW</span>
							    </li>							  
							</ul><!-- /.slides -->
						</div><!-- /.flexslider -->
					</div><!-- /.col-md-6 -->
					<div class="col-md-6">
						<div class="product-detail">
							<div class="header-detail">
								<h4 class="name">[[${item.title}]]</h4>
								<div class="category">
                                    [[${item.categoryName}]]
								</div>
								<div class="reviewed">
									<div class="review">
										<div class="queue">
											<i class="fa fa-star" aria-hidden="true"></i>
											<i class="fa fa-star" aria-hidden="true"></i>
											<i class="fa fa-star" aria-hidden="true"></i>
											<i class="fa fa-star" aria-hidden="true"></i>
											<i class="fa fa-star" aria-hidden="true"></i>
										</div>
									
									</div><!-- /.review -->
									<div class="status-product">
										货量 <span>[[${item.num}]]</span>
									</div>
								</div><!-- /.reviewed -->
							</div><!-- /.header-detail -->
							<div class="content-detail">
								<div class="price">								
									<div class="sale">
                                        [[${item.price / 100}]]
									</div>
								</div>
								<div class="info-text">
                                    [[${item.sellPoint}]]
								</div>
								<div class="product-id">
									商品id: <span class="id">[[${item.id}]]</span>
								</div>
							</div><!-- /.content-detail -->
							<div class="footer-detail">
								<div class="quanlity-box">
									
									<div class="quanlity">
										<span id="q_down" class="btn-down"></span>
										<input type="number" name="number" id="q_num" value="1" min="1" max="100" placeholder="数量">
										<span id="q_up" class="btn-up"></span>
									</div>
								</div><!-- /.quanlity-box -->
								<div class="box-cart style2">
									<div class="btn-add-cart">
										<a  href="javascript:void(0);"  class="button-rl" id="cart_add" onclick="CART.addToCart()"><img src="/images/icons/add-cart.png" alt="">加入购物车</a>
									</div>
								</div><!-- /.box-cart -->							
							</div><!-- /.footer-detail -->
						</div><!-- /.product-detail -->
					</div><!-- /.col-md-6 -->
				</div><!-- /.row -->
			</div><!-- /.container -->
		</section><!-- /.flat-product-detail -->

		<section class="flat-product-content">
			<ul class="product-detail-bar">
				<li class="active">描述</li>
				<li>评分</li>
			</ul><!-- /.product-detail-bar -->
			<div class="container">
				<div class="row">
					
					<div class="col-md-12">
						<div class="different-color">
							<div class="title">
                                [[${item.title}]]
							</div>
                            <div class="title">
                                [[${item.sellPoint}]]
                            </div>
                            <p th:utext="${itemDesc.itemDesc}">
                            </p>
						</div><!-- /.different-color -->
					</div><!-- /.col-md-12 -->
				
					
					
				</div><!-- /.row -->				
				<div class="row">
											
					<div class="col-md-6">
						<div class="rating">
							<div class="title">
									评分
							</div>
							<div class="score">
								<div class="average-score">
									<p class="numb" id="aversocre">4.3</p>
									<p class="text">评价分数</p>
								</div>
								<div class="queue">
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
								</div>
							</div><!-- /.score -->
							<ul class="queue-box">
								<li class="five-star">
									<span>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
									</span>
									<span class="numb-star" id="five">3</span>
								</li><!-- /.five-star -->
								<li class="four-star">
									<span>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
									</span>
									<span class="numb-star" id="four">4</span>
								</li><!-- /.four-star -->
								<li class="three-star">
									<span>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
									</span>
									<span class="numb-star" id="three">3</span>
								</li><!-- /.three-star -->
								<li class="two-star">
									<span>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
									</span>
									<span class="numb-star" id="two">2</span>
								</li><!-- /.two-star -->
								<li class="one-star">
									<span>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
									</span>
									<span class="numb-star" >0</span>
								</li><!-- /.one-star -->
							</ul><!-- /.queue-box -->
						</div><!-- /.rating -->
					</div><!-- /.col-md-6 -->
					<div class="col-md-6">
							<div class="form-review">
								<div class="title">
									评价
								</div>
								<div class="your-rating queue">
									<span>大家的评价</span>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
								</div>
								<div class="your-rating queue">
										<span> </span>											
								</div>
								<div class="your-rating queue">
										<span> </span>											
								</div>
								<div class="your-rating queue">
										<span> </span>											
								</div>
								<div class="your-rating queue">
										<span> </span>											
								</div>
									<div class="review-form-comment">
										<textarea name="review-text" placeholder="收货后可回来评价哦"></textarea>
									</div>
									
								</form>
							</div><!-- /.form-review -->
						</div><!-- /.col-md-6 -->						
				</div><!-- /.row -->
			</div><!-- /.container -->
		</section><!-- /.flat-product-content -->



		<div th:replace="./module/footer::footer"></div>


	</div><!-- /.boxed -->

		<!-- Javascript -->
		<script type="text/javascript" src="/js/jquery.min.js"></script>
		<script type="text/javascript" src="/js/tether.min.js"></script>
		<script type="text/javascript" src="/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="/js/waypoints.min.js"></script>
		<script type="text/javascript" src="/js/jquery.circlechart.js"></script>
		<script type="text/javascript" src="/js/easing.js"></script>
		<script type="text/javascript" src="/js/jquery.flexslider-min.js"></script>
		<script type="text/javascript" src="/js/owl.carousel.js"></script>
		<script type="text/javascript" src="/js/smoothscroll.js"></script>
		<script type="text/javascript" src="/js/jquery-ui.js"></script>
	    <script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=AIzaSyBtRmXKclfDp20TvfQnpgXSDPjut14x5wk&region=GB"></script>
	   <script type="text/javascript" src="/js/jquery.mCustomScrollbar.js"></script>
	   	<script type="text/javascript" src="/js/gmap3.min.js"></script>
	   	<script type="text/javascript" src="/js/waves.min.js"></script>
		<script type="text/javascript" src="/js/jquery.countdown.js"></script>
    <script type="text/javascript" src="/js/jquery.alerts.js"></script>
		<script type="text/javascript" src="/js/main.js"></script>

    <script>
        var q_up = document.getElementById("q_up");
        var q_down = document.getElementById("q_down");
        var q_num = document.getElementById("q_num");

        q_up.onclick = function() {

            q_num.value = parseInt( q_num.value) + 1;
        }

        q_down.onclick = function() {

            if(q_num.value <= 0) {
                q_num.value = 0;
            } else {

                q_num.value = parseInt(q_num.value) - 1;
            }

        }
    </script>
    <script type="text/javascript" >
        var CART = {
            param: {
                hurl: "http://localhost:8088"
            },
            check: function () {
                var flag = true;
                var q_num = document.getElementById("q_num");
                var num = [[${item.num}]];
                if (q_num.value > num ) {
                    jAlert("不得大于库存"  , "错误");
                    flag = false;
                }
                return flag;
            },
            index: function () {
                    var id = [[${item.id}]];
                    var q_num = document.getElementById("q_num");
                    location.href = CART.param.hurl+"/cart/add/"+id+".html?num="+q_num.value;
                return false;
            },
            addToCart: function () {
                if (this.check()) {
                    this.index();
                }
            }
        };
    </script>
</body>
</html>
